<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
    <title>用户管理 - 钢域云贸</title>
    <link rel="icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="shortcut icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" media="all"/>
    <link rel="stylesheet" type="text/css" href="/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<!-- 公共头部 -->
<th:block th:replace="~{/header.html}"></th:block>

<!-- Main Content -->
<main class="container mx-auto my-8">
    <!-- Search and Filter -->
    <form th:action="@{/manager/user}" method="get" class="flex flex-wrap items-center gap-4 mb-6">

        <!-- 搜索框 -->
        <div class="relative w-64">
            <input type="text" name="search" th:value="${search}" placeholder="搜索用户…"
                   class="pl-3 pr-9 py-2 rounded-full text-sm text-gray-800 border border-gray-300 w-full
                      focus:outline-none focus:ring-2 focus:ring-blue-300 transition" />
            <button type="submit" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-blue-600">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M21 21l-5-5m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
            </button>
        </div>

        <!-- 角色选择 -->
        <select name="role"
                class="px-4 py-2 border border-gray-300 rounded-lg text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-300">
            <option value="">角色</option>
            <option value="SUPPLIER" th:selected="${role == 'SUPPLIER'}">供应商</option>
            <option value="BUYER" th:selected="${role == 'BUYER'}">买家</option>
        </select>

        <!-- 状态选择 -->
        <select name="status"
                class="px-4 py-2 border border-gray-300 rounded-lg text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-300">
            <option value="">状态</option>
            <option value="1" th:selected="${status == 1}">启用</option>
            <option value="0" th:selected="${status == 0}">禁用</option>
        </select>

        <!-- 筛选按钮 -->
        <button type="submit"
                class="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
            <i class="fas fa-filter mr-2"></i> 筛选
        </button>
        <a th:href="@{/manager/user}"
           class="flex items-center px-4 py-2 bg-gray-300 text-gray-800 rounded-md hover:bg-gray-400 transition">
            <i class="fas fa-redo mr-2"></i> 重置
        </a>
    </form>

    <!-- User Table -->
    <div class="bg-white p-6 rounded shadow">
        <table class="w-full table-auto">
            <thead>
            <tr class="border-b bg-gray-200">
                <th class="p-2 text-left">用户名</th>
                <th class="p-2 text-left">邮箱</th>
                <th class="p-2 text-left">手机号</th>
                <th class="p-2 text-left">公司名称</th>
                <th class="p-2 text-left">角色</th>
                <th class="p-2 text-left">状态</th>
                <th class="p-2 text-left">创建时间</th>
                <th class="p-2 text-left">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="user : ${users}" class="table-row border-b">
                <td class="p-2" th:text="${user.username}"></td>
                <td class="p-2" th:text="${user.email}"></td>
                <td class="p-2" th:text="${user.phone}"></td>
                <td class="p-2" th:text="${user.company}"></td>
                <td class="p-2" th:text="${user.role == 'SUPPLIER' ? '供应商' : '买家'}"></td>
                <td class="p-2" th:text="${user.statusText}"></td>
                <td class="p-2" th:text="${#temporals.format(user.createTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                <td class="p-2">
                    <form th:if="${user.status == 0}" th:action="@{/manager/user/delete}" method="post" style="display:inline;">
                        <input type="hidden" name="id" th:value="${user.id}">
                        <button type="submit" class="action-btn text-red-600 hover:text-red-800" onclick="return confirm('确认删除？')">删除</button>
                    </form>
                    <form th:action="@{/manager/user/toggleStatus}" method="post" style="display:inline;">
                        <input type="hidden" name="id" th:value="${user.id}">
                        <input type="hidden" name="status" th:value="${user.status == 1 ? 0 : 1}">
                        <button type="submit" class="action-btn" th:class="${user.status == 1} ? 'text-yellow-600 hover:text-yellow-800' : 'text-green-600 hover:text-green-800'"
                                th:text="${user.status == 1} ? '封禁' : '启用'" onclick="return confirm('确认' + (${user.status == 1} ? '封禁' : '启用') + '？')"></button>
                    </form>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="flex justify-center mt-6 space-x-2">
        <a th:href="@{/manager/user(page=${currentPage - 1}, search=${search}, role=${role}, status=${status})}"
           th:classappend="${currentPage == 1} ? 'bg-blue-600 text-white px-4 py-2 rounded opacity-50 cursor-not-allowed' : 'bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700'"
           th:attr="disabled=${currentPage == 1} ? 'disabled' : null">上一页</a>
        <!-- 页码跳转 -->
        <div class="flex space-x-1">
            <a th:each="i : ${#numbers.sequence(1, totalPages)}"
               th:href="@{/manager/user(page=${i}, search=${search}, role=${role}, status=${status})}"
               th:classappend="${i == currentPage} ? 'bg-blue-600 text-white px-3 py-1 rounded' : 'bg-gray-200 text-gray-700 px-3 py-1 rounded hover:bg-blue-200'"
               th:text="${i}"></a>
        </div>
        <a th:href="@{/manager/user(page=${currentPage + 1}, search=${search}, role=${role}, status=${status})}"
           th:classappend="${currentPage == totalPages} ? 'bg-blue-600 text-white px-4 py-2 rounded opacity-50 cursor-not-allowed' : 'bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700'"
           th:attr="disabled=${currentPage == totalPages} ? 'disabled' : null">下一页</a>
    </div>
</main>

<!-- 公共底部 -->
<th:block th:replace="~{/footer.html}"></th:block>

<!-- Toast Script -->
<script>
    function showToast(message) {
        const toast = document.createElement('div');
        toast.style.position = 'fixed';
        toast.style.bottom = '20px';
        toast.style.right = '20px';
        toast.style.background = 'linear-gradient(to right, #4ade80, #22c55e)';
        toast.style.color = 'white';
        toast.style.padding = '12px 20px';
        toast.style.borderRadius = '10px';
        toast.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
        toast.style.display = 'flex';
        toast.style.alignItems = 'center';
        toast.style.zIndex = 9999;
        toast.style.minWidth = '250px';
        toast.style.fontSize = '16px';
        toast.style.fontWeight = 'bold';

        const messageSpan = document.createElement('span');
        messageSpan.textContent = message;

        const closeBtn = document.createElement('button');
        closeBtn.textContent = '✖️';
        closeBtn.style.marginLeft = 'auto';
        closeBtn.style.background = 'transparent';
        closeBtn.style.border = 'none';
        closeBtn.style.color = 'white';
        closeBtn.style.fontSize = '18px';
        closeBtn.style.cursor = 'pointer';

        closeBtn.onclick = function() {
            toast.remove();
        };

        toast.appendChild(messageSpan);
        toast.appendChild(closeBtn);
        document.body.appendChild(toast);

        setTimeout(() => {
            toast.remove();
        }, 3000);
    }
</script>
</body>
</html>